<template>
    <div>
        <Button type="primary" style="margin-bottom:10px" @click="ToAxios">增加</Button>
        <Button type="primary" style="margin-bottom:10px" @click="ToDelete">删除</Button>
        <Table border :columns="columns" :data="dataW" ref="selection" @on-selection-change="handleSelect">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Modal v-model = "modal6" title   = "确认框">
                    <p>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="姓名" prop="name">
                                <Input v-model="formValidate.name" placeholder="请输入您的姓名"></Input>
                            </FormItem>
                            <FormItem label="密码" prop="password">
                                <Input type="password" v-model="formValidate.password"></Input>
                            </FormItem>
                            <FormItem label="身高(cm)" prop="stature">
                                <InputNumber :min="1" v-model="formValidate.stature" placeholder="请输入您的身高"></InputNumber>
                            </FormItem>
                            <FormItem label="体重(kg)" prop="weight">
                                <InputNumber :min="1" v-model="formValidate.weight" placeholder="请输入您的体重"></InputNumber>
                            </FormItem>
                            <FormItem label="学历" prop="education">
                                <Select v-model="formValidate.education" placeholder="请选择">
                                    <Option value="doctor">博士</Option>
                                    <Option value="master">硕士</Option>
                                    <Option value="BachelorDegree">本科</Option>
                                    <Option value="JuniorCollege">专科</Option>
                                    <Option value="HighSchool">高中</Option>
                                </Select>
                            </FormItem>
                            <!-- <FormItem label="专业" prop="major">
                                <Input v-model="formValidate.major" placeholder="请输入您的专业"></Input>
                            </FormItem> -->
                            <FormItem label="日期">
                                <Row>
                                    <Col span="11">
                                        <FormItem prop="date">
                                            <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </FormItem>
                            
                            <FormItem label="性别" prop="gender">
                                <RadioGroup v-model="formValidate.gender">
                                    <Radio label="male">男</Radio>
                                    <Radio label="female">女</Radio>
                                </RadioGroup>
                            </FormItem>
                            <FormItem label="爱好" prop="interests">
                                <CheckboxGroup v-model="formValidate.interests">
                                    <Checkbox label="Eat"></Checkbox>
                                    <Checkbox label="Sleep"></Checkbox>
                                    <Checkbox label="Run"></Checkbox>
                                    <Checkbox label="Movie"></Checkbox>
                                </CheckboxGroup>
                            </FormItem>
                            <FormItem label="经历" prop="experience">
                                <Input v-model="formValidate.experience" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入点什么..."></Input>
                            </FormItem>
                            <!-- <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem> -->
                        </Form>
                        <div slot="footer">
                            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                        </div>
                    </p>
                </Modal>
                <Button type="primary" size="small" style="margin-right: 5px" @click="ToAxios(row._id)">修改</Button>
                <Button type="error" size="small"  @click="confirm(row._id)">删除</Button>
            </template>
        </Table>
        <Page :total="total" show-sizer placement="top" style="margin-top:10px;" @on-change="PageChange" @on-page-size-change="PageSizeChange"/>
    </div>
    
</template>

<script>
export default {
        data () {
            return {
                columns: [
                    {
                        type : 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        slot : 'name'
                    },
                    {
                        title: '密码',
                        key  : 'password'
                    },
                    {
                        title: '性别',
                        key  : 'gender'
                    },
                    {
                        title: '学历',
                        key  : 'education'
                    },
                    // {
                    //     title: '专业',
                    //     key  : 'major'
                    // },
                    {
                        title: '身高',
                        key  : 'stature'
                    },
                    {
                        title: '体重',
                        key  : 'weight'
                    },
                    {
                        title: '日期',
                        key  : 'date'
                    },
                    {
                        title: '操作',
                        slot : 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                dataW       : [],
                total       : 0,
                page        : 1,
                rows        : 10,
                formValidate: {
                    name    : '',
                    stature : 1,
                    password: '',
                    // major     : '',
                    weight    : 1,
                    education : '',
                    gender    : '',
                    interests : [],
                    date      : '',
                    experience: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'change',type:'string'}
                    ],
                    stature: [
                        { required: true, message: 'The stature cannot be empty', trigger: 'change',type:'number'}
                    ],
                    weight: [
                        { required: true, message: 'The weight cannot be empty', trigger: 'change',type:'number'}
                    ],
                    // major: [
                    //     { required: true, message: 'The major cannot be empty', trigger: 'change'}
                    // ],
                    password: [
                        { required: true, message: 'Password cannot be empty', trigger: 'blur',type: 'string' }
                    ],
                    education: [
                        { required: true, message: 'Please select Your Degree', trigger: 'change' ,type:'string'}
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change',type:'string'}
                    ],
                    interests: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change',type:'date'}
                    ],
                    experience: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'change' }
                    ]
                },
                modal6  : false,
                loading : true,
                Id      : '',
                DeleteId: []
            }
        },
        methods: {
            confirm (id) {
                 this.$Modal.confirm({
                    title  : '确认框',
                    content: '你确定要删除该条数据吗？',
                    onOk   : () => {
                            this.axios({
                                url   : `http://localhost:3000/${id}`,
                                method: 'delete'
                            }).then(res=>{
                                this.getList();
                            })
                        this.$Message.info('删除成功');
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            ToAxios(id){
                this.formValidate = {}
                this.modal6       = true
                if(id){
                        this.axios({
                        url   : `http://localhost:3000/${id}`,
                        method: 'put'
                    }).then(res=>{
                        this.formValidate = res.data
                        this.Id           = res.data._id
                    })
                }
            },
            getList(){
                this.axios({
                    url   : 'http://localhost:3000/list',
                    method: 'post',
                    data  : {
                        page: this.page,
                        rows: this.rows
                    }
                }).then(res=>{
                    var New = res.data.rows
                    // for(var i=0;i<New.length;i++){
                    //     New[i].major = New[i].major.join(',')
                    // }
                    this.dataW = New;
                    this.total = res.data.total
                })
            },
            PageChange(page){
                this.page = page;
                this.getList();
            },
            PageSizeChange(rows){
                this.rows = rows;
                this.getList();
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                        if (valid) {
                            if(this.Id){
                                this.axios({
                                    url   : `http://localhost:3000/${this.Id}`,
                                    method: 'put',
                                    data  : this.formValidate
                                    }).then(res=>{
                                    this.getList();
                                    this.$refs[name].resetFields();
                                    this.modal6 = false;
                                    this.Id     = '';
                                })
                            }else{
                                this.axios({
                                    url   : `http://localhost:3000/`,
                                    method: 'post',
                                    data  : this.formValidate
                                    }).then(res=>{
                                    this.getList();
                                    this.$refs[name].resetFields();
                                    this.modal6 = false;
                                    this.Id     = '';
                                })
                            }
                    } else {
                        this.$Message.error('失败!请正确填写');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSelect (status) {
                this.DeleteId = []
                if(status.length>0){
                    for(var i=0;i<status.length;i++){
                        this.DeleteId.push(status[i]);
                    } 
                }
                return this.DeleteId
            },
            ToDelete(){
                var ids = []
                var Del = this.DeleteId
                this.$Modal.confirm({
                    title  : '确认框',
                    content: '你确定要删除吗？',
                    onOk   : () => {
                            if(Del.length>0){
                                for(var i=0;i<Del.length;i++){
                                    ids.push(Del[i]._id)
                                }
                                this.axios({
                                        url   : `http://localhost:3000/removes`,
                                        method: 'post',
                                        data  : {
                                            ids: ids.toString()
                                        }
                                    }).then(res=>{
                                        this.getList();
                                    })
                                this.DeleteId = []
                                this.$Message.info('删除成功');
                            }else{
                                this.$Message.info('请选择删除对象');
                            }
                            
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                })
            }
        },
        mounted() {
            this.getList();
        },
    }
</script>